<!-- components/ImageUpload/ImageUpload.vue -->
<template>
  <uni-file-picker
    v-model="fileList"
    mode="grid"
    :max-count="maxCount"
    :file-size-limit="fileSizeLimit"
    @change="handleChange"
  >
    <view slot="button">
      <uni-icons type="camera" size="32"></uni-icons>
    </view>
  </uni-file-picker>
  <view class="upload-tips"
    >照片数量不超过{{ maxCount }}张，单张照片大小不超过{{
      sizeLimitText
    }}</view
  >
</template>

<script setup lang="ts">
import { ref, computed } from "vue";

const props = withDefaults(
  defineProps<{
    maxCount?: number;
    fileSizeLimit?: number;
  }>(),
  {
    maxCount: 5, // 默认限制5张
    fileSizeLimit: 10 * 1024 * 1024, // 默认10MB
  }
);

const sizeLimitText = computed(() => {
  const size = props.fileSizeLimit / 1024 / 1024;
  return `${size}MB`;
});

const emit = defineEmits(["change"]);

const fileList = ref([]);

const handleChange = (files: any) => {
  emit("change", files);
};
</script>
<style lang="scss" scoped>
.upload-tips {
  font-size: 24rpx;
  color: #999;
  margin-top: 10rpx;
  position: absolute;
  left: 30rpx;
  bottom: 30rpx;
}
</style>